import { useState } from 'react'
import File from "./file";
import s from "./index.module.less";
import { Alert, Button, Input, Space, Checkbox, message } from 'antd';

function App(): JSX.Element {
  const [path, setPath] = useState<any>('')
  const [modifyFile, setModifyFile] = useState<any>([])
  const [options, setOptions] = useState<any>([])
  const [value, setValue] = useState<any>([])

  return (
    <div className={s.fileTH}>
      <div className={s.left}>
        <File
          setModifyFile={setModifyFile}
        />
      </div>
      <Button type="primary" className={s.button} onClick={() => {
        window.api.fileTH2(modifyFile, value,() => {
          message.success('下发成功')
        }, (error) => {
          message.error('下发失败:' + error)
        })
        
      }}>替换</Button>
      <div className={s.right}>
        <Space>
          <Input
            size='small'
            spellCheck="false"
            value={path}
            style={{ width: 380 }}
            placeholder='底版路径'
          />
          <Button size='small' type='primary' onClick={async () => {
            const path1 = window.api.syncOperationWindow('selectDirectory')
            if (path1) {
              const data = await window.api.fileTH(path1)

              setOptions(data.list)
              setValue(data.list.map(item => item.value))
            }
            setPath(path1)
          }}>上传版本底版</Button>
        </Space>
        <Alert style={{ marginTop: 10 }} showIcon message="将对勾选的区版本进行下发文件" type="warning" />
        <Checkbox.Group
          options={options}
          value={value}
          onChange={(e) => {
            setValue(e)
          }}
        />
      </div>
    </div>
  )
}

export default App
